<template>
  <div class="container">
    <h1>姓名</h1>
    <input type="text" v-model.lazy="person.firstName"><br>
    <input type="text" v-model.lazy="person.lastName"><br>
    <span>Vue2:{{ fullNameForVue2 }}</span><br>
    <span>Vue3:{{ person.fullNameForVue3 }}</span>
    <input type="text" v-model.lazy="person.fullNameForVue3"><br>
  </div>
</template>

<script>
import {reactive, computed} from "vue";//引入ref实现响应式
export default {
  name: 'App',
  components: {},
  setup() {
    let person = reactive({
      firstName: '张',
      lastName: '三'
    })

    //使用vue3的计算属性 组合式API,需要引入
    //简写形式,没有考虑计算属性被修改的情况
    // person.fullNameForVue3 = computed(() => person.firstName + '_' + person.lastName)//将其存到person中

    //完整写法:考虑读写
    person.fullNameForVue3 = computed({
      get() {
        return person.firstName + '_' + person.lastName
      },
      set(value) {
        const nameArr = value.split('_')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })//将其存到person中

    //将数据交出去
    return {
      person
    }
  },
  //使用vue2的计算属性
  computed: {
    fullNameForVue2() {
      return this.person.firstName + '_' + this.person.lastName //使用vue2的计算属性,这里通过this拿到vue3的值
    }
  }


}
</script>

<style>
.container {
  width: 200px;
  background-color: gray;
  margin: auto;
}
</style>
